<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>星语言乐章后台管理</title>
<!-- Favicon -->
<link rel="shortcut icon" href="/admin/assets/img/moon.jpg">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;1,400&amp;display=swap">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-5.0.0.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="/admin/assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="/admin/assets/plugins/fontawesome/css/all.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="/admin/assets/css/style.css">
  <!-- 添加歌手样式表 -->
  <link rel="stylesheet" href="/admin/css/songAdd.css">
  <!-- 添加歌手样式表 -->
  <link rel="stylesheet" href="/admin/css/alert.css">
</head>
<body>
<!-- Main Wrapper -->
<div class="main-wrapper"><!-- Header -->
  <div class="header"><!-- Logo -->
    <div class="header-left">
      <a href="/admin/dataAnalysis" class="logo"><img src="/admin/assets/img/logo.png" alt="Logo"></a><a href="index.html" class="logo logo-small"><img src="assets/img/logo-small.png" alt="Logo" width="30" height="30"></a>
    </div>
    <a href="javascript:void(0);" id="toggle_btn"><i class="fas fa-align-left"></i></a>
    <div class="top-nav-search">
    </div>
    <a class="mobile_btn" id="mobile_btn"><i class="fas fa-bars"></i></a>
    <ul class="nav user-menu">
    </ul>
  </div>
  <div class="sidebar" id="sidebar">
    <div class="sidebar-inner slimscroll">
      <div id="sidebar-menu" class="sidebar-menu">
        <ul>
          <li class="menu-title"><span>数据分析</span></li>
          <li class="active"><a href="/admin/dataAnalysis"><i class="fas fa-th-large"></i><span>歌曲数据分析</span></a></li>
          <li class="menu-title"><span>数据管理</span></li>
          <li class="submenu"><a href="#"><i class="fas fa-user-graduate"></i><span>排行榜管理</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="javascript:void (0)" onclick="hot()">热歌榜</a></li>
              <li><a href="javascript:void (0)" onclick="soaring()">飙升榜</a></li>
            </ul>
          <li class="submenu"><a href="#"><i class="fas fa-chalkboard-teacher"></i><span>歌手管理</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="javascript:void(0)" onclick="searchSinger(1,12)">歌手信息</a></li>
              <li><a href="javascript:void(0)" onclick="addSinger()">添加歌手</a></li>
            </ul>
          </li>
          <li class="submenu"><a href="#"><i class="fas fa-building"></i><span>音乐管理</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="javascript:void(0)" onclick="songPage(1,12)">音乐信息</a></li>
              <li><a href="javascript:void(0)" onclick="songAddPage()">添加音乐</a></li>
            </ul>
          </li>
          <li class="submenu"><a href="#"><i class="fas fa-book-reader"></i><span>用户管理</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="javascript:void(0)" onclick="userPage(1,12)">用户信息</a></li>
<!--              <li><a href="javascript:void(0)" onclick="userAdminInsPage()">添加用户</a></li>-->
            </ul>
          </li>
          <li class="menu-title"><span>其它信息</span></li>
          <li class="submenu"><a href="#"><i class="fas fa-columns"></i><span>评论 </span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="javascript:void(0)" onclick="commentPage(1,12)"><i class="fas fa-vector-square"></i><span>评论信息</span></a></li>
            </ul>
          </li>
          <li class="menu-title"><span>设置</span></li>
          <li class="submenu"><a href="#"><i class="fas fa-shield-alt"></i><span>登录设置 </span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="javascript:void(0)" onclick="logOut()">注销登录</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /Sidebar --><!-- Page Wrapper -->
  <div class="page-wrapper">
    <div class="content container-fluid" id="box">
      <!--访问量统计-->
      <div class="page-header">
        <div class="row">
          <div class="col-sm-12">
            <h3 class="page-title">Welcome Admin!</h3>
            <ul class="breadcrumb">
              <li class="breadcrumb-item active">Dashboard</li>
            </ul>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="row">
        <div class="col-xl-3 col-sm-6 col-12">
          <div class="card bg-one">
            <div class="card-body">
              <div class="db-widgets d-flex justify-content-between align-items-center">
                <div class="db-icon"><i class="fas fa-user-graduate"></i></div>
                <div class="db-info">
                  <h3 th:text="${sumNum}"></h3>
                  <h6>访问量</h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计图 -->
      <div class="row">
        <!--饼图-->
        <div class="col-md-12 col-lg-6"><!-- Revenue Chart -->
          <div class="card card-chart">
            <div class="card-body">
              <div id="pie"></div>
            </div>
          </div>
        </div>
        <!--柱状图-->
        <div class="col-md-12 col-lg-6">
          <div class="card card-chart">
            <div class="card-body">
              <div id="myBar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <p>Copyright © 2020By <a href="#">星语乐章.</a></p>
    </footer>
</div>
</div>
<!--<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>-->
<script src="/admin/assets/js/jquery-3.5.1.min.js"></script>
<script src="/admin/assets/js/popper.min.js"></script>
<script src="/admin/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/admin/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>-->
<script src="/base/echarts.min.js"></script>

<!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
<script src="/base/chart.js"></script>
<script src="/admin/assets/js/script.js"></script>
<!--引入评论请求api-->
<script src="/router/admin/commentManagement.js"></script>
<!--引入歌手管理api-->
<script src="/router/admin/singerManagement.js"></script>
<!--引入歌曲管理api-->
<script src="/router/admin/songManagement.js"></script>
<!--引入用户管理api-->
<script src="/router/admin/userManagement.js"></script>
<!--引入排行管理api-->
<script src="/router/admin/leaderboardManagement.js"></script>
<script  th:inline="javascript">
  function logOut() {
    $.ajax({
      url:'/admin/adminLogOut',
      type:'get',
      success:function () {
        window.location.href="/user/userIndex"
      }
    })
  }





  let typeList=[[${typeGroupVos}]];
  let typeList001=[]
  for (let i in typeList ){
    typeList001[typeList001.length]={value:typeList[i].count,name:typeList[i].type}
  }
  $('#pie').css({width:"500px",height:"500px"})
  let pie = echarts.init(document.getElementById('pie'));
  // 绘制饼图
  pie.setOption({
    // 标题
    title: {
      text: '音乐类型分布图'
    },
    // 图例
    tooltip: {
      show: true,
      trigger: "item",
      backgroundColor: "#1677FF",
      // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      formatter: "{a}：{b}<br/>{c}首({d}%)"
    },
    // 不同区域的颜色
    color: ['#ddeef8', '#a5cced', '#b8c3e3','#7ca3ce','#6996bf'],
    series: [
      {
        name: '音乐类',
        type: 'pie',
        // 数组的第一项是内半径，第二项是外半径；可以设置不同的内外半径显示成圆环图
        radius: '50%',
        // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标；设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
        center: ['50%', '50%'],
        data: typeList001,
        itemStyle: {
          // 显示图例
          normal: {
            label: {
              show: true
            },
            labelLine: {
              show: true
            }
          },
          emphasis: {
            // 图形阴影的模糊大小
            shadowBlur: 10,
            // 阴影水平方向上的偏移距离
            shadowOffsetX: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })


  let recommendList=[[${recommendGroupVos}]];
  console.log(recommendList)
  let recommendList001=[];
  let recommendList002=[];
  for (let i in recommendList ){
    recommendList001[i]=recommendList[i].recommend
    recommendList002[i]=recommendList[i].count
  }
  console.log(recommendList001)
  console.log(recommendList002)
  $('#myBar').css({width:"500px",height:"500px"})
  let myBar = echarts.init(document.getElementById('myBar'));
  myBar.setOption({

    //画布背景色设置
    backgroundColor: "transparent",
    title: {
      text: "音乐推荐",
      textStyle: {
        //设置主标题字体颜色
        color: "#90E5E7"
      },
      subtext: ""
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["分类一", "分类二"]
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        saveAsImage: { show: true }
      }
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        data: recommendList001,
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          //y轴
          show: false
        },
        axisTick: {
          //刻度线
          show: false
        },
        splitLine: {
          //网格线
          show: true
        }
      }
    ],
    series: [
      {
        name: "播放量",
        type: "bar",
        //设置柱状图宽度
        barWidth: "13",
        //柱状图间距
        barGap:"200%",
        data: recommendList002,
        itemStyle: {
          normal: {
            // 统一设置四个角的圆角大小
            barBorderRadius: 12,
            //设置柱状图颜色渐变
            color: new this.echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#5ad9e8"
                      },
                      {
                        offset: 1,
                        color: "#caecf0"
                      }
                    ]
            )
          }
        }
      }
    ]
  })
</script>

</body>
</html>